<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Tutorial for getting started with GoJS." />
  <title>Get Started with GoJS</title>
  <!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" >
  <!-- custom CSS after bootstrap -->
  <link href="../assets/css/main.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/css/highlight.css" rel="stylesheet" type="text/css" media="all" />
  <script src="../assets/js/highlight.js"></script>

  <script src="go.js"></script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-1506307-5', 'auto');
  ga('send', 'pageview');

</script>
</head>

<body>
    <!-- non-fixed navbar -->
    <nav id="api-nav" class="navbar navbar-inverse navbar-top">
      <div class="container">
        <div class="navbar-header" data-toggle="collapse" data-target="#navbar">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                  aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">GoJS</a>-->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="../index.html">Home</a></li>
            <li><a href="../learn/index.html">Learn</a></li>
            <li><a href="../samples/index.html">Samples</a></li>
            <li><a href="../intro/index.html">Intro</a></li>
            <li><a href="../api/index.html">API</a></li>
            <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
            <li><a href="../doc/download.html">Download</a></li>
            <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
            <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
            <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
            <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div id="bannertop" class="jumbotron banner">
      <div class="container">
        <h1><span>Get Started with GoJS</span></h1>
      </div>
    </div>

    <div class="container-fluid learn-container">
    <div class="row">
    <p>
      <b>GoJS</b> is a JavaScript library for implementing interactive diagrams.
      This page will show you the essentials of using <b>GoJS</b>.
    </p>

    <p>
      Because <b>GoJS</b> is a JavaScript library that depends on HTML5 features,
      you will need to make sure that your page declares that it is an HTML5 document.
      And of course you need to load the library:
    </p>

    <pre><code>
&lt;!DOCTYPE html&gt;  &lt;!-- HTML5 document type --&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;!-- use go-debug.js when developing and go.js when deploying --&gt;
  &lt;script src="go-debug.js"&gt;&lt;/script&gt;
  . . .
    </code></pre>

    <p>You can download GoJS (and all the samples) <a target="_blank" href="../doc/download.html">here</a>. Alternatively you can link straight to the GoJS provided by <a target="_blank" href="https://cdnjs.com/libraries/gojs">CDNJS</a>:

    <pre><code>
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.7/go-debug.js"&gt;&lt;/script&gt;
    </code></pre>

    <p>
      Each <b>GoJS</b> diagram is contained in an HTML <code>&lt;div&gt;</code> element in your
      HTML page that you give an explicit size:
    </p>

    <pre><code>
&lt;!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
     In this case we also add a background color so we can see that area. --&gt;
&lt;div id="myDiagramDiv"
     style="width:400px; height:150px; background-color: #DAE4E4;"&gt;&lt;/div&gt;
    </code></pre>

    <p>
      In JavaScript code you pass the <code>&lt;div&gt;</code>'s <code>id</code> when making a Diagram:
    </p>

    <pre><code>
var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv");
    </code></pre>

    <p>
      Together, this creates an empty diagram:
    </p>

    <!-- LIVE -->
    <div id="myDiagramDiv" class="diagramStyling" style="width:400px; height:150px"></div>
    <script>
    var $ = go.GraphObject.make;
    var myDiagram = $(go.Diagram, "myDiagramDiv");
    </script>

    <p>
      Notice that <code>go</code> is the "namespace" in which all <b>GoJS</b> types reside.
      All code uses of <b>GoJS</b> classes such as Diagram or Node or Panel or Shape or TextBlock
      will be prefixed with "<code>go.</code>".
    </p>
    <p>
      This article will show you by example how to use <code>go.GraphObject.make</code> to build <b>GoJS</b> objects.
      For more detail, read <a href="../intro/buildingObjects.html">Building Objects in GoJS</a>.
      Using <code>$</code> as an abbreviation for <code>go.GraphObject.make</code>
      is so handy that we will assume its use from now on.
      If you use <code>$</code> for something else in your code, you can always pick a different short variable name,
      such as <code>$$</code> or <code>MAKE</code> or <code>GO</code>.
    </p>

    <h2>Diagrams and Models</h2>

    <p>
      The Nodes and Links of a Diagram are visualizations of data that is managed by a Model.
      <b>GoJS</b> has a model-view architecture,
      where Models hold the data (arrays of JavaScript objects) that describe nodes and links,
      and Diagrams act as views to visualize this data using actual Node and Link objects.
      Models, not Diagrams, are what you load and then save after editing.
      You add whatever properties you need for your app on the data objects in the model;
      you do not add properties to or modify the prototype of the Diagram and GraphObject classes.
    </p>

    <p>
      Here's an example of a Model and Diagram, followed by the actual diagram it generates:
    </p>

    <pre><code>
var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

var myModel = $(go.Model);
// in the model data, each node is represented by a JavaScript object:
myModel.nodeDataArray = [
  { key: "Alpha" },
  { key: "Beta" },
  { key: "Gamma" }
];
myDiagram.model = myModel;
    </code></pre>

    <!-- LIVE -->
    <div id="myDiagramDiv2" class="diagramStyling" style="width:400px; height:150px"></div>
    <script>
    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv2",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
        });

    var myModel = $(go.Model);
    // in the model data, each node is represented by a JavaScript object:
    myModel.nodeDataArray = [
      { key: "Alpha" },
      { key: "Beta" },
      { key: "Gamma" }
    ];
    myDiagram.model = myModel;
    </script>

    <p>
      The diagram displays the three nodes that are in the model. Some interaction is already possible:
    </p>
    <ul>
      <li>Click and drag the background in the above diagram to pan the view.</li>
      <li>Click a node to select it, or press down on and drag a node to move it around.</li>
      <li>To create a selection box, click and hold on the background, then start dragging.</li>
      <li>Use CTRL-C and CTRL-V, or control-drag-and-drop, to make a copy of the selection.</li>
      <li>Press the Delete key to delete selected nodes.
          (Read about more <a href="../intro/commands.html">Keyboard Commands</a>.)</li>
      <li>Since the undo manager was enabled, CTRL-Z and CTRL-Y will undo and redo moves and copies and deletions.</li>
    </ul>

    <h2>Styling Nodes</h2>

    <p>
      Nodes are styled by creating templates consisting of GraphObjects and setting properties on those objects.
      To create a <a href="../intro/nodes.html">Node</a>, we have several building block classes at our disposal:
    </p>
    <ul>
      <li><a href="../intro/shapes.html">Shape</a>, to display pre-defined or custom geometry with colors</li>
      <li><a href="../intro/textblocks.html">TextBlock</a>, to display (potentially editable) text in various fonts</li>
      <li><a href="../intro/pictures.html">Picture</a>, to display images</li>
      <li><a href="../intro/panels.html">Panel</a>, containers to hold a collection of other objects that
      can be positioned and sized in different manners according to the type of the Panel (like tables,
      vertical stacks, and stretching containers)</li>
    </ul>

    <p>
      All of these building blocks are derived from the <code>GraphObject</code> class,
      so we casually refer to them as GraphObjects or objects or elements.
    </p>

    <p>
      We want the model data properties to affect our Nodes, and this is done by way of data bindings.
      Data bindings allow us to change the appearance and behavior of GraphObjects in Nodes by automatically setting
      properties on those GraphObjects to values that are taken from the model data.
      The model data objects are plain JavaScript objects.
      You can choose to use whatever property names you like on the node data in the model.
    </p>

    <p>
      The default Node template is simple: A Node which contains one TextBlock.
      There is a data binding between a TextBlock's <code>text</code> property and
      the model data's <code>key</code> property.
      In code, the template looks like this:
    </p>

    <pre><code>
myDiagram.nodeTemplate =
  $(go.Node,
    $(go.TextBlock,
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );
    </code></pre>
    <p>
      Note that there is no <code>Node.key</code> property.
      But you can get the key for a Node via <code>someNode.data.key</code>.
    </p>
    <p>
      TextBlocks, Shapes, and Pictures are the primitive building blocks of <b>GoJS</b>.
      TextBlocks cannot contain images; Shapes cannot contain text.
      If you want your node to show some text, you must use a TextBlock.
      If you want to draw or fill some geometrical figures, you must use a Shape.
    </p>
    <p>
      More generally, the skeleton of a Node template will look something like this:
    </p>

    <pre><code>
myDiagram.nodeTemplate =
  $(go.Node, "Vertical" // second argument of a Node/Panel can be a Panel type
    { /* set Node properties here */ },
    // example Node binding sets Node.location to the value of Node.data.loc
    new go.Binding("location", "loc"),

    // GraphObjects contained within the Node
    // this Shape will be vertically above the TextBlock
    $(go.Shape,
      "RoundedRectangle", // string argument can name a predefined figure
      { /* set Shape properties here */ },
      // example Shape binding sets Shape.figure to the value of Node.data.fig
      new go.Binding("figure", "fig")),

    $(go.TextBlock,
      "default text",  // string argument can be initial text string
      { /* set TextBlock properties here */ },
      // example TextBlock binding sets TextBlock.text to the value of Node.data.key
      new go.Binding("text", "key"))
  );
    </code></pre>

    <p>
      Nesting can be arbitrarily deep, and every class has its own unique set of properties to explore,
      but this shows the general idea.
    </p>

    <p>
      Now that we have seen how to make a Node template, let's see a live example.
      We will make a simple template commonly seen in organizational diagrams — an image next to a name.
      Consider the following Node template:
    </p>
    <ul>
      <li>A Node of "Horizontal" Panel type, meaning that its elements will be laid out horizontally side-by-side.
        It has two elements:
        <ul>
          <li>A Picture for the portrait, with the image source data bound</li>
          <li>A TextBlock for the name, with the text data bound</li>
        </ul>
      </li>
    </ul>

    <pre><code>
var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    // the entire node will have a light-blue background
    { background: "#44CCFF" },
    $(go.Picture,
      // Pictures should normally have an explicit width and height.
      // This picture has a red background, only visible when there is no source set
      // or when the image is partially transparent.
      { margin: 10, width: 50, height: 50, background: "red" },
      // Picture.source is data bound to the "source" attribute of the model data
      new go.Binding("source")),
    $(go.TextBlock,
      "Default Text",  // the initial value for TextBlock.text
      // some room around the text, a larger font, and a white stroke:
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      // TextBlock.text is data bound to the "name" attribute of the model data
      new go.Binding("text", "name"))
  );

var model = $(go.Model);
model.nodeDataArray =
[ // note that each node data object holds whatever properties it needs;
  // for this app we add the "name" and "source" properties
  { name: "Don Meow", source: "cat1.png" },
  { name: "Copricat", source: "cat2.png" },
  { name: "Demeter",  source: "cat3.png" },
  { /* Empty node data */  }
];
myDiagram.model = model;
    </code></pre>

    <p>That code produces this diagram:</p>

    <!-- LIVE -->
    <div id="myDiagramDiv3" class="diagramStyling" style="width:700px; height:200px"></div>
    <script>
    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv3",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
        });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        // the entire node will have a light-blue background
        { background: "#44CCFF" },
        $(go.Picture,
          // the picture has a red background, only visible when there is no source set
          // or when the image is partially transparent
          { margin: 10, width: 50, height: 50, background: "red" },
          // Picture.source is data bound to the "source" attribute of model data:
          new go.Binding("source")),
        $(go.TextBlock,
          "Default Text",  // the initial value for TextBlock.text
          // some room around the text, a larger font, and a white stroke
          { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
          // TextBlock.text is data bound to the "name" attribute of model data:
          new go.Binding("text", "name"))
      );

    var model = $(go.Model);
    model.nodeDataArray =
    [ // note that each node data object holds whatever properties it needs;
      // for this app we add the "name" and "source" properties
      { name: "Don Meow",  source: "cat1.png" },
      { name: "Copricat", source: "cat2.png" },
      { name: "Demeter", source: "cat3.png" },
      { /* Empty node data */  }
    ];
    myDiagram.model = model;
    </script>

    <p>
      We may want to show some "default" state when not all information is present,
      for instance when an image does not load or when a name is not known.
      The "empty" node data in this example is used to show that node templates can work
      perfectly well without any of the properties on the bound data.
    </p>

    <h2>Kinds of Models</h2>

    <p>
      With a custom node template our diagram is becoming a pretty sight, but perhaps we want to show more.
      Perhaps we want an organizational chart to show that Don Meow is really the boss of a cat cartel.
      So we will create a complete organization chart diagram by adding some Links to show the relationship
      between individual nodes and a Layout to automatically position the nodes.
    </p>

    <p>
      In order to get links into our diagram, the basic <code>Model</code> is not going to cut it.
      We are going to have to pick one of the other two models in <b>GoJS</b>, both of which support Links.
      These are <code>GraphLinksModel</code> and <code>TreeModel</code>.
      (Read more about models <a href="../intro/usingModels.html">here</a>.)
    </p>

    <p>
      In GraphLinksModel, we have <code>model.linkDataArray</code> in addition to the <code>model.nodeDataArray</code>.
      It holds an array of JavaScript objects, each describing a link by specifying the "to" and "from" node keys.
      Here's an example where node A links to node B and where node B links to node C:
    </p>

    <pre><code>
var model = $(go.GraphLinksModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B" },
  { key: "C" }
];
model.linkDataArray =
[
  { from: "A", to: "B" },
  { from: "B", to: "C" }
];
myDiagram.model = model;
    </code></pre>

    <p>
      A GraphLinksModel allows you to have any number of links between nodes, going in any direction.
      There could be ten links running from A to B, and three more running the opposite way, from B to A.
    </p>

    <p>
      A TreeModel works a little differently.
      Instead of maintaining a separate array of link data,
      the links in a tree model are created by specifying a "parent" for a node data.
      Links are then created from this association.
      Here's the same example done as a TreeModel, with node A linking to node B and node B linking to node C:
    </p>

    <pre><code>
var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B", parent: "A" },
  { key: "C", parent: "B" }
];
myDiagram.model = model;
    </code></pre>

    <p>
      TreeModel is simpler than GraphLinksModel, but it cannot make arbitrary link relationships,
      such as multiple links between the same two nodes, or having multiple parents.
      Our organizational diagram is a simple hierarchical tree-like structure,
      so we will choose TreeModel for this example.
    </p>

    <p>
      First, we will complete the data by adding a few more nodes, using a TreeModel,
      and specifying keys and parents in the data.
    </p>

    <pre><code>
var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

var model = $(go.TreeModel);
model.nodeDataArray =
[ // the "key" and "parent" property names are required,
  // but you can add whatever data properties you need for your app
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
    </code></pre>

    <!-- LIVE -->
    <div id="myDiagramDiv4" class="diagramStyling" style="width:700px; height:200px"></div>
    <script>
    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv4",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
        });

    // the template we defined earlier
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        { background: "#44CCFF" },
        $(go.Picture,
          { margin: 10, width: 50, height: 50, background: "red" },
          new go.Binding("source")),
        $(go.TextBlock, "Default Text",
          { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
          new go.Binding("text", "name"))
      );

    var model = $(go.TreeModel);
    model.nodeDataArray =
    [
      { key: "1",              name: "Don Meow",   source: "cat1.png" },
      { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
      { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
      { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
      { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
      { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
    ];
    myDiagram.model = model;
    </script>

    <h2>Diagram Layouts</h2>

    <p>
      As you can see the TreeModel automatically creates the necessary Links to associate the Nodes,
      but it's hard to tell whose parent is who.
    </p>

    <p>
      Diagrams have a default layout which takes all nodes that do not have a location and gives them locations,
      arranging them in a grid.
      We could explicitly give each of our nodes a location to sort out this organizational mess,
      but as an easier solution in our case, we will use a layout that gives us good locations automatically.
    </p>

    <p>
      We want to show a hierarchy, and are already using a TreeModel, so the most natural layout choice is TreeLayout.
      TreeLayout defaults to flowing from left to right, so to get it to flow from top to bottom
      (as is common in organizational diagrams), we will set the <code>angle</code> property to 90.
    </p>

    <p>
      Using layouts in <b>GoJS</b> is usually simple.
      Each kind of layout has a number of properties that affect the results.
      There are samples for each layout (like <a href="../samples/tLayout.html">TreeLayout Demo</a>)
      that showcase its properties.
    </p>

    <pre><code>
// define a TreeLayout that flows from top to bottom
myDiagram.layout =
  $(go.TreeLayout,
    { angle: 90, layerSpacing: 35 });
    </code></pre>

    <p>
      <b>GoJS</b> has several other layouts, which you can read about <a href="../intro/layouts.html">here</a>.
    </p>

    <p>
      Adding the layout to the diagram and model so far, we can see our results:
    </p>

    <pre><code>
var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
    </code></pre>

    <!-- LIVE -->
    <div id="myDiagramDiv5" class="diagramStyling" style="width:700px; height:400px"></div>
    <script>
    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv5",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
          layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                    { angle: 90, layerSpacing: 35 })
        });

    // the template we defined earlier
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        { background: "#44CCFF" },
        $(go.Picture,
          { margin: 10, width: 50, height: 50, background: "red" },
          new go.Binding("source")),
        $(go.TextBlock, "Default Text",
          { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
          new go.Binding("text", "name"))
      );

    var model = $(go.TreeModel);
    model.nodeDataArray =
    [
      { key: "1",              name: "Don Meow",   source: "cat1.png" },
      { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
      { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
      { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
      { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
      { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
    ];
    myDiagram.model = model;
    </script>

    <p>
      Our diagram is starting to look like a proper organization chart, but we could do better with the links.
    </p>

    <h2>Link Templates</h2>

    <p>
      We will construct a new Link template that will better suit our wide, boxy nodes.
      A <a href="../intro/links.html">Link</a> is a different kind of Part, not like a Node.
      The main element of a Link is the Link's shape,
      and must be a Shape that will have its geometry computed dynamically by <b>GoJS</b>.
      Our link is going to consist of just this shape,
      with its stroke a little thicker than normal and dark gray instead of black.
      Unlike the default link template we will not have an arrowhead.
      And we will change the Link <code>routing</code> property from Normal to Orthogonal,
      and give it a <code>corner</code> value so that right-angle turns are rounded.
    </p>

    <pre><code>
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    // default routing is go.Link.Normal
    // default corner is 0
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" }) // the link shape

    // if we wanted an arrowhead we would also add another Shape with toArrow defined:
    // $(go.Shape, { toArrow: "Standard", stroke: null }
    );
    </code></pre>

    <p>
      Combining our Link template with our Node template, TreeModel, and TreeLayout,
      we finally have a full organization diagram.
      The complete code and result diagram are as follows:
    </p>

    <pre><code>
var $ = go.GraphObject.make;

var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
    </code></pre>

    <!-- LIVE -->
    <div id="myDiagramDiv6" class="diagramStyling" style="width:700px; height:400px"></div>
    <script>
    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv6",
        {
          initialContentAlignment: go.Spot.Center, // center Diagram contents
          "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
          layout: $(go.TreeLayout,
                    { angle: 90, layerSpacing: 35 })
        });

    // the template we defined earlier
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        { background: "#44CCFF" },
        $(go.Picture,
          { margin: 10, width: 50, height: 50, background: "red" },
          new go.Binding("source")),
        $(go.TextBlock, "Default Text",
          { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
          new go.Binding("text", "name"))
      );

    // define a Link template that routes orthogonally, with no arrowhead
    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal, corner: 5 },
        $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape

    var model = $(go.TreeModel);
    model.nodeDataArray =
    [
      { key: "1",              name: "Don Meow",   source: "cat1.png" },
      { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
      { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
      { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
      { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
      { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
    ];
    myDiagram.model = model;
    </script>

    <p>
      Now that you are familiar with some of the basics of <b>GoJS</b>,
      consider perusing the <a href="../samples/index.html">samples</a> to see some of the diagrams possible with <b>GoJS</b>,
      or read the <a href="../intro/index.html">technical introduction</a> to get
      an in-depth look at the components of <b>GoJS</b>.
    </p>


  <p class="footer">
    GoJS &reg; by Northwoods Software. Copyright &copy; 1998-2016 <a href="https://www.nwoods.com" target="_blank">Northwoods Software</a> &reg;
  </p>

  </div> <!-- end row -->
  </div> <!-- end container-fluid -->
  <div class="banner" id="bannerbottom">
    <!-- text in banner-->
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script async src="../assets/js/bootstrap.min.js"></script>
</body>
</html>
